<template>
	<view class="content">
		<view class="main">
			<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
			<view class="tabs">
				<u-sticky bgColor="#F6F6F6;">
					<u-tabs :list="list1" :scrollable="false"></u-tabs>
				</u-sticky>
			</view>
			<view class="list_quan" v-for="(item,index) in data" :key="index">
				<view class="quan_left">
					
				</view>
				<view class="quan_center">
					<p style="width: 90%;margin: 0 auto;font-size: 30rpx;font-weight: bold;line-height: 50rpx;">{{item.coupon.title}}</p>
				<p style="width: 90%;height: 50%;margin: 0 auto;font-size: 18rpx;white-space: pre-wrap;">{{item.coupon.editors}}</p>
				</view>
				<view class="quan_right">
					<p style="margin-top: 30rpx;">￥<span style="font-size: 50rpx;">348</span></p>
					<p style="font-size: 30rpx;margin-top: 10rpx;">满6999元可用</p>
					<u-button text="立即使用" @click="receives()" color="#FED74C" style="width: 80%;height: 50rpx;border-radius: 35rpx;margin-top: 10rpx;color: black;"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navgatsVue from '../../../common/navgats/navgats.vue';
	import {
		coupons,
		mycoupons,
		receive,
		
	} from "../../../api/api.js"
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '租赁券',
				}, {
					name: '买断券'
				}],
				navigationMsg: {
					title: "我的卡券",
					bgColor: "#ffffff"
				},
				data:[]
			}
		},
		onShow(){
			this.coupons()
			this.mycoupons()
		},
		 components: {
			navgatsVue
		},

		methods: {
			records(){
				uni.navigateTo({
					url:"/pages/mys/Records/Records"
				})
			},
			async receives(){
				let data={
					coupons_id:1
				}
				let res= await receive(data)
				
				uni.showToast({
					title: res.data.msg,
					icon: 'none',
					duration: 2000
				})
				console.log(res)
			},
			// 获取所有卡券列表
		async coupons(){
				let res=await coupons()
				console.log(res.data.data,"获取所有卡券接口")
				
			},
			// 我的卡券接口
		async mycoupons(){
				let res=await mycoupons()
				console.log(res,"我的卡券列表")
				this.data=res.data.data
			},
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style>
	* {
		font-size: 5vw;
		font-family: Microsoft JhengHei;

	}

	.content {
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		display: flex;
	 flex-direction: column;
		align-items: center;
		overflow-y: auto;
		position: relative;
	}

	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tabs {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}
	.list_quan{
		width: 90%;
		height: 230rpx;
		/* background-color: aqua; */
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
	}
	.quan_left{
		width: 30%;
		height: 100%;
		background-color: #ffffff;
	}
	.quan_center{
		flex: 1;
		border-radius: 0 20rpx 20rpx 0  ;
		background-color: #ffffff;
	}
	.quan_right{
		width: 30%;
		height: 100%;
		background-color: #FFFDEB;
		border-left: 1px dashed #F2EE9D;
		text-align: center;
	}

</style>